<template>
    <div id='' class='i_tree'>
        <Tree class="demo-tree-render" :select-node="selectNode" :expand-node="expandNode" :data="treeData" :show-checkbox="checkbox" :render="renderContent" :multiple="multiple" @on-check-change="select" @on-select-change="select" ref="treeRef"></Tree>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: '',
    props: ['data', 'conversion', 'checkbox', 'multiple', 'renderContent', 'selectNode', 'expandNode'],
    data() {
        return {
            treeData: [],
            map: null,
            selectArray: []
        };
    },
    components: {},
    computed: {
        ...mapState("other/tree", ["tree"])
    },
    created() { this.handelTree() },
    mounted() { },
    methods: {
        ...mapActions("other/tree", ["saveTree"]),
        handelTree(allTreeData) {
            if (this.conversion) {
                this.saveTree({
                    key: 'tree',
                    value: JSON.stringify(this.toTree(allTreeData || this.data))
                })
                this.treeData = this.toTree(allTreeData || this.data);
            } else {
                this.treeData = allTreeData || this.data;
                this.saveTree({
                    key: 'tree',
                    value: JSON.stringify(allTreeData) || JSON.stringify(this.data)
                })
            }
        },
        select(event, item) {
            this.selectArray = event
            this.$emit('onChange', event, item)
        },
        //获取节点方法
        checked() {
                let c = this.$refs.treeRef.getCheckedNodes()
                this.$emit('getChecked', c)
        },
        //获取选中及半选节点
        checkedHalf() {
                let c = this.$refs.treeRef.getCheckedAndIndeterminateNodes()
                this.$emit('getCheckedHalf', c)
        },
        reset() {
            this.treeData = JSON.parse(this.tree)
        },
        search(value) {
            if (!value && this.tree.length !== 0) {
                this.treeData = this.tree;
                return false;
            }
            if (value == '') {
                return false;
            }
            let searchArray = this.toFlat(this.treeData.concat());
            this.map = new Map();
            for (let i = 0; i < searchArray.length; i++) {
                const item = searchArray[i];
                if (item.title.indexOf(value) !== -1) {
                    if (!this.map.has(item.id)) {
                        this.map.set(item.id, item)
                    }
                }
            }
            this.map.forEach((value, key, map) => {
                this.getNode(value, searchArray)
            })
            this.treeData = this.toTree(Array.from(this.map).map(item => item[1]))
        },
        getNode(itemObj, searchArray) {
            for (let i = 0; i < searchArray.length; i++) {
                const item = searchArray[i];
                if (itemObj.pid == item.id) {
                    parent = item;
                    this.$set(item, 'expand', true)
                    if (!this.map.has(item.id)) {
                        this.map.set(item.id, item)
                    }
                    if (item.pid !== 0) {
                        this.getNode(item, searchArray)
                    }
                }
            }
        },
        toFlat(data, id, thisArray) {
            let resultArray = thisArray ? thisArray : []
            for (let i = 0; i < data.length; i++) {
                const item = data[i];
                if (id) {
                    item['pid'] = id
                }
                resultArray.push(item)
                if (item.children && item.children.length) {
                    this.toFlat(item.children, item.id, resultArray)
                    delete item.children
                }
            }
            return resultArray
        },
        mapTree(data) {
            let treeArray = [];
            let map = new Map();
            let outPutObj, pid;
            let $data = data.sort((a, b) => { return a.pid - b.pid })
            for (let i = 0; i < $data.length; i++) {
                const item = $data[i];
                pid = item.pid;
                if (map.has(pid)) {
                    if (!map.get(pid).children) {
                        map.get(pid).children = [];
                    }
                    let obj = Object.assign({}, item);
                    map.get(pid).children.push(obj);
                    map.set(item.id, obj);
                } else if (!map.has(pid) || pid == 0) {
                    outPutObj = Object.assign({}, item);
                    treeArray.push(outPutObj);
                    map.set(item.id, outPutObj);
                }
            }
            return treeArray
        },
        toTree(data) {
            let list = JSON.parse(JSON.stringify(data))
            var _data = {}; // 递归源对象
            var treeArray = [];
            for (let i = 0; i < list.length; i++) {
                const element = list[i];
                _data[element.id] = element;
            }
            for (let i = 0; i < list.length; i++) {
                const child = list[i];
                if (_data.hasOwnProperty(child.pid)) {
                    const parent = _data[child.pid];
                    if (!parent.hasOwnProperty("children")) parent["children"] = [];
                    parent["children"].push(child);
                } else {
                    treeArray.push(child); //把一级放到treeData
                }
            }
            return treeArray;
        }
    },
    watch: {}
}
</script>
<style >
.i_tree .demo-tree-render .ivu-tree-title {
    width: 90%;
}
</style>
<style lang='less' scoped>
</style>